<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>

    <div>
        <button class="layui-btn layui-btn-normal" id="add">添加院线</button>
        <form class="layui-form" onsubmit="return false" style="display:inline-block">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="tel" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">

                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit id="btnSubmit">查询</button>
                            <button class="layui-btn" lay-submit id="btnReset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <table id="stus"></table>

    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/mock-min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../js/common.js"></script>
    <script type="text/html" id="toolbarDemoLeft"></script>

    <script>

        layui.use('table', function () {
            let table = layui.table;

            table.render({
                elem: '#stus'
                , url: '/api/Cinema' //数据接口
                , page: true //开启分页
                ,toolbar:"#stus"
                , cols: [
                    [
                       
                        {
                            title: '图片',
                            templet:`#imgBox`
                        },
                        {
                            field: 'name',
                            title: '院线名'
                        },
                        {
                            field: 'addr',
                            title: '地址'
                        },
                        {
                            field: 'tel',
                            title: '电话'
                        },
                        {

                            title: "操作",
                            templet: `
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-sm" onclick="edit('{{d._id}}')">
                                    <i class="layui-icon">编辑</i>
                                </button>
                                <button class="layui-btn layui-btn-sm" onclick="MovieAndCinema('{{d._id}}')">
                                    <i class="layui-icon">上映和场次管理</i>
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delCourse('{{d._id}}', this)">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                              `
                        }
                    ]
                ]
            });

        });

        $("#btnSubmit").click(function () {
            const key = $("#txtKey").val();
            layui.table.reload("stus", {
                where: {
                    key,
                    page: 1,
                },
                page:{
                    curr:1  //重新设置第一页
                }
            });
        })
        //重置
        $("#btnReset").click(function () {
            $("#txtKey").val("");
            $("#btnSubmit").click();
        })
        function delCourse(id, btn) {
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/Cinema/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }

        let add = document.getElementById("add");
        add.onclick = function () {
            location.href = "./add.html";
        }
        function edit(id) {
            // console.log(id)
            location.href = "./edit.html?id=" + id;
        }
        function MovieAndCinema(id) {
            console.log(id)
            location.href = "../MovieAndCinema/select.html?id=" + id;
        }
    </script>
    <script id="imgBox" type="text/html">
        <div>
            <img src="{{d.image}}" class="table-row-img">
        </div>
    </script>
</body>
</html>